import React , { Component }from 'react';
import { connect } from 'dva';
import {  Button, Table, Form, Input, Popconfirm,Row, Col } from 'antd';
const FormItem = Form.Item;
var _this;
class Hardware extends Component {
  constructor(props) {
      super(props);
  }

  componentDidMount() {
    var dispatch = this.props.dispatch;
    function hello(){ 
      dispatch({
        type: 'hardware/queryList',
        payload: { ..._this.props.form.getFieldsValue(),...{'pageNum':_this.props.hardware.current, 'pageSize':_this.props.hardware.currentSize}},
      });
  } 
    //重复执行某个方法 
  var t1 = window.setInterval(hello,30000); 
}

render() {
  _this = this; 
  const { getFieldDecorator, getFieldsValue, getFieldValue } =  this.props.form;
  const { loading} =  this.props.hardware
  const hardware=this.props.hardware;
  var dispatch = this.props.dispatch;
  const formItemLayout = {
    wrapperCol: { className: 'wrapper-col' },
  }

  const columns = [ {
    title: '所属机柜',
    dataIndex: 'asset_name',
    key: 'asset_name',
    width: 120,
  },{
    title: '硬件IP',
    dataIndex: 'ip_',
    key: 'ip_',
    width: 120,
  },{
    title: '最后心跳时间',
    dataIndex: 'online_time',
    key: 'online_time',
    width: 120,
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,    
  },{
    title: '硬件类型',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    render: (value, row, index) => {
        return (
          "DAM"
        )
    }
    
  } ];

  const pagination = {
    current:hardware.current,
    pageSize:hardware.currentSize,
    total: hardware.total,
    showSizeChanger: true,
    showTotal: (total => '共' + hardware.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'hardware/queryList',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'hardware/queryList',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':hardware.currentSize} },
      });
    },
  };
  const submitHandle = () => {
    dispatch({
        type: 'hardware/queryList',
        payload: { ...getFieldsValue() },
    });
  }

  function handleClear() {
    _this.props.form.resetFields();
  }

  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{minHeight:'100%'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" style={{width:'100%'}}>
              <Row gutter={16}>
                  <Col span={5}>
                      <FormItem style={{ width: '100%' }} {...formItemLayout}>
                      {getFieldDecorator('assetName')(<Input  placeholder="请输入机柜名称模糊查找" style={{ width: '100%' }}/>)}
                      </FormItem>
                  </Col>
                  <Col span={5}>
                      <FormItem style={{ width: '100%' }} {...formItemLayout}>
                      {getFieldDecorator('ip')(<Input  placeholder="请输入IP查找" style={{ width: '100%' }}/>)}
                      </FormItem>
                  </Col>
                      <FormItem >
                          <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                      </FormItem>
                      <FormItem>
                          <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                      </FormItem> 
                                
              </Row>
         </Form>
        </div>
        <div style={{width:'100%',padding:"30px 20px",}}>
          <Table columns={columns} rowKey={record => record.asset_name} loading={loading} dataSource={hardware.list} pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
}
}
function mapStateToProps(state) {
  return { hardware : state.hardware,loading:state.loading.models.hardware};
}

Hardware = Form.create()(Hardware);

export default connect(mapStateToProps)(Hardware);
